<template>
	<view>
		<view class="image_box">
			<!-- 图片容器 -->
			<view class="the_image_box" v-if="temp_image_url.length != 0">
				<view class="the_image">
					<image :src="temp_image_url[0]" mode="aspectFill" @click="preview_image"></image>
				</view>
				<uni-icons @click="del_image" type="clear" color="rgba(0, 0, 0, 0.6)"></uni-icons>
			</view>

			<!-- 添加图片和识别按钮 -->
			<view class="upload_image_btn" hover-class="upload_image_btn_active" @click="upload_image">
				<text class="add" v-if="temp_image_url.length == 0">+</text>
				<text class="identify" v-else>开始识别</text>
			</view>
		</view>
	</view>
</template>

<script>
	import detect from '@/static/detect/index.js'

	import {
		mapState
	} from 'vuex'

	export default {
		name: "myUploadImage",
		options: {
			styleIsolation: 'shared',
		},
		data() {
			return {
				// 临时图片的路径
				temp_image_url: []
			};
		},
		computed: {
			// 映射状态管理的state
			...mapState({
				// 当前第一大类的选择状态
				first_category_index: state => state.first_category_index,
				// 当前第二大类的选择状态
				second_category_index: state => state.second_category_index
			})
		},
		methods: {
			// 预览图片
			preview_image() {
				uni.previewImage({
					urls: this.temp_image_url
				})
			},

			// 删除图片
			del_image() {
				uni.showModal({
					title: '提示',
					content: '是否删除图片'
				}).then(res => {
					console.log(res);
					// 如果点击确定
					if (res[1].confirm) {
						this.temp_image_url = []
						this.$parent.temp_image_url = []
					}
				})
			},
			
			// 识别图片流程函数
			detect_it(){
				// 1.获取识别需要的access_token
				detect.get_access_token().then(res=>{
					// 获取请求回来的access_token
					const access_token = res.data.access_token
					// 2.将临时图片路径转换为base64
					const base64String = detect.toBase64String(this.temp_image_url[0])
					// 3.根据目前的index来调用相应的识别函数
					this.detect_estimate(access_token, base64String)
				})
			},

			// 点击添加或者识别按钮
			upload_image() {
				if (this.temp_image_url.length == 0) {
					// 如果是 添加图片 按钮
					uni.chooseMedia({
						count: 1,
						mediaType: ['image']
					}).then(res => {
						this.temp_image_url.push(res[1].tempFiles[0].tempFilePath)
						this.$parent.temp_image_url = this.temp_image_url
					})
				} else {
					// 如果是 开始识别 按钮
					uni.showModal({
						title:'提示',
						content:'是否识别图片'
					}).then(res=>{
						// 如果点击确定按钮
						if(res[1].confirm){
							// 识别图片
							this.detect_it()
						}
					})
					
				}
			},

			// 判断当前情况进行调用识别函数
			detect_estimate(access_token, base64String) {
				switch (this.second_category_index) {
					// 校园卡识别函数调用
					case 0:
						detect.campus_card_detect(access_token, base64String).then(res => {
							console.log('校园卡识别：', res);
							const student_name = res.data.words_result[3].words
							const student_ID = res.data.words_result[4].words
							this.$parent.formData.student_name = student_name.substring(3)
							this.$parent.formData.student_ID = student_ID.substring(3).replaceAll(' ', '')
						})
						break
						// 身份证识别函数调用
					case 1:
						detect.ID_card_detect(access_token, base64String).then(res => {
							console.log('身份证识别：', res);
							const student_name = res.data.words_result['姓名'].words
							const ID_card_No = res.data.words_result['公民身份号码'].words
							this.$parent.formData.student_name = student_name
							this.$parent.formData.ID_card_No = ID_card_No.replaceAll(' ', '')
						})
						break
						// 电影卡识别函数调用
					case 2:
						detect.movie_card_detect(access_token, base64String).then(res => {
							console.log('电影卡识别：', res);
							const movie_card_No = res.data.words_result[6].words
							this.$parent.formData.movie_card_No = movie_card_No.substring(3).replaceAll(' ', '')
						})
						break
						// 银行卡识别函数调用
					case 3:
						detect.bank_card_detect(access_token, base64String).then(res => {
							console.log('银行卡识别：', res);
							const {
								bank_name,
								bank_card_number
							} = res.data.result
							this.$parent.formData.bank_card_name = bank_name
							this.$parent.formData.bank_card_No = bank_card_number.replaceAll(' ', '')
						})
						break
						// 其他物品lost&found识别函数调用
					default:
						detect.other_item_detect(access_token, base64String).then(res => {
							console.log('其他物品识别：', res);
							const item_name = res.data.result[0].keyword
							this.$parent.formData.item_name = item_name
						})
						break
				}
			}

		},
		// 数据监听
		watch: {
			// 当前第二大类的选择状态改变时候清空图片数组
			second_category_index(newValue, oldValue) {
				if (newValue != oldValue) {
					this.temp_image_url = []
					this.$parent.temp_image_url = []
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.image_box {
		width: 600rpx;
		height: 180rpx;
		margin: 20rpx 0;
		display: flex;

		.the_image_box {
			position: relative;

			.the_image {
				width: 180rpx;
				height: 180rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				margin-right: 30rpx;
				background-color: #efefef;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			// 删除按钮
			/deep/ .uniui-clear {
				position: absolute;
				top: -20rpx;
				right: 8rpx;
				font-size: 45rpx !important;
			}
		}


		// 添加图片
		.upload_image_btn {
			width: 180rpx;
			height: 180rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: #EDF1FD;
			color: #014da1;
			display: flex;
			justify-content: center;
			align-items: center;

			.add {
				margin-top: -10rpx;
				font-size: 100rpx;
			}

			.identify {
				font-size: 32rpx;
				color: #014da1;
				font-weight: bold;
			}
		}

		.upload_image_btn_active {
			background-color: #d7e1f8;
		}
	}
</style>
